<template>
  <div>
    <Button  disabled type="primary" @click="longdao = true" >新增</Button>
    <Drawer
        title="添加项目"
        v-model="longdao"
        width="700"
        :mask-closable="true"
        :styles="styles">
      <Form  ref="myForm" :model="formData" :rules="ruleValidate">
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="平台名称" label-position="top" >
              <Input v-model="formData.EnvName" placeholder="输入平台名称" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="jenkins地址" label-position="top">
              <Input v-model="formData.JenkinsAddress" placeholder="输入jenkins地址" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="jenkins用户" label-position="top" prop="JenkinsUser">
              <Input v-model="formData.JenkinsUser" placeholder="输入jenkins用户" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="jenkins密码" label-position="top">
              <Input v-model="formData.JenkinsPassword" placeholder="输入jenkins密码" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="Dubbo监控" label-position="top">
              <Input v-model="formData.DubboAddress" placeholder="输入Dubbo监控地址" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="Dubbo账号" label-position="top">
              <Input v-model="formData.DubboUser" placeholder="输入Dubbo监控账号" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="Dubbo密码" label-position="top">
              <Input v-model="formData.DubboPassword" placeholder="输入Dubbo监控密码" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="Rancher地址" label-position="top">
              <Input v-model="formData.RancherAddress" placeholder="输入Rancher地址" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="eureka地址" label-position="top">
              <Input v-model="formData.EurekaAddress" placeholder="输入eureka地址" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="eureka账号" label-position="top">
              <Input v-model="formData.EurekaUser" placeholder="输入eureka账号" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="eureka密码" label-position="top">
              <Input v-model="formData.EurekaPassword" placeholder="输入eureka密码" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="Rocketmq监控" label-position="top">
              <Input v-model="formData.RocketmqAddress" placeholder="输入Rocketmq地址" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="Rockermq账号" label-position="top">
              <Input v-model="formData.RocketmqUser" placeholder="输入Rocketmq用户" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="Rockermq密码" label-position="top">
              <Input v-model="formData.RocketmqPassword" placeholder="输入Rocketmq密码" />
            </FormItem>
          </Col>
        </Row>
        <!--      <Row :gutter="32">-->
        <!--        <Col span="12">-->
        <!--          <FormItem label="本地解析" label-position="top">-->
        <!--            <Select v-model="formData.Resolv" placeholder="请选择">-->
        <!--              <Option value="jobs">开启</Option>-->
        <!--              <Option value="ive">不开启</Option>-->
        <!--            </Select>-->
        <!--          </FormItem>-->
        <!--        </Col>-->
        <!--        <Col span="12">-->
        <!--          <FormItem label="Type" label-position="top">-->
        <!--            <Select v-model="formData.type" placeholder="please choose the type">-->
        <!--              <Option value="private">Private</Option>-->
        <!--              <Option value="public">Public</Option>-->
        <!--            </Select>-->
        <!--          </FormItem>-->
        <!--        </Col>-->
        <!--      </Row>-->
      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="longdao = false;" >取消</Button>
        <Button type="primary" @click="saveData">确定</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import axios from "axios";

export default {
  name: 'AddTable',
  inject:['reload'],
  data () {
    return {
      longdao: false,
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      formData: {
        EnvName: '',
        JenkinsAddress: '',
        JenkinsUser: '',
        JenkinsPassword: '',
        DubboAddress: '',
        DubboUser: '',
        DubboPassword: '',
        RancherAddress: '',
        EurekaAddress: '',
        EurekaUser: '',
        EurekaPassword: '',
        RocketmqAddress: '',
        RocketmqUser: '',
        RocketmqPassword: '',
        // Resolv:'',
      },
      ruleValidate: {
        JenkinsUser: [
          { required: true, message: 'The name cannot be empty', trigger: 'blur' }
        ],}
    }
  },

  methods: {
    background (type) {
      this.$Message[type]({
        background: true,
        content: type === 'success' ? '添加成功' : '添加失败'
      });
    },
    saveData() {
      axios.post('http://172.30.53.223:8888/api/items', this.formData)
          .then(response => {
            // 数据保存成功
            console.log(response.data);
            this.background('success');
            this.longdao = false;
            // console.log("关闭抽屉");
            this.$refs['myForm'].resetFields()
            // this.$refs.myForm.resetFields();
          })
          .catch(error => {
            // 处理错误
            console.error(error);
            this.background('error');
          });
      this.reload()
    }
  }
}
</script>
<style>
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
